import React from 'react';
import ReactECharts from 'echarts-for-react';
import {EChartsOption} from "echarts";

const HorizontalBarChart = (props: {type: string}) => {
  const getOption = (): EChartsOption => {
    return {
      title: {
        text: `销售${props.type}排行榜`,
        left: '-5px',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '0%',  // 设置为0%从容器的最左侧开始
        right: '0',  // 留出一些空间在右侧显示数据
        containLabel: false,  // 确保标签被容器包含，不被裁剪
        top: '50px',
        bottom: '0',
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        show: false,
      },
      yAxis: {
        type: 'category',
        data: [
          "冰点苏打水500ml",
          "清爽柠檬茶300ml",
          "纯净矿泉水1L",
          "活力橙汁250ml",
          "醇香咖啡饮料330ml",
          "冰镇绿茶500ml",
          "天然葡萄汁200ml",
          "维他柚子茶450ml",
          "原味豆奶1L",
          "冰爽可乐350ml"
        ],
        show: false  // 完全隐藏Y轴
      },
      series: [
        {
          type: 'bar',
          barWidth: '15px',
          data: [
            {value: 5, itemStyle: {color: '#fbe9bb'}}, // 最浅的颜色
            {value: 10, itemStyle: {color: '#fbe9bb'}}, // 最浅的颜色
            {value: 15, itemStyle: {color: '#fbe9bb'}}, // 最浅的颜色
            {value: 20, itemStyle: {color: '#fbe9bb'}}, // 最浅的颜色
            {value: 25, itemStyle: {color: '#fbe9bb'}}, // 最浅的颜色
            {value: 30, itemStyle: {color: '#fbe9bb'}}, // 最浅的颜色
            {value: 35, itemStyle: {color: '#f4ddb4'}},
            {value: 40, itemStyle: {color: '#edd1ad'}},
            {value: 45, itemStyle: {color: '#e6c5a6'}},
            {value: 50, itemStyle: {color: '#deba9f'}}  // 最深的颜色
          ],
          label: {
            show: true,
            position: [0, '-120%'],
            formatter: function (params: any) {
              return params.name;  // 显示商品名称
            },
            fontSize: '13px',
            fontWeight: 'bold',
            color: '#000'  // 标签颜色
          }
        }
      ]
    };
  };

  return <ReactECharts option={getOption()} style={{height: 600, marginTop: '20px'}}/>;
};

export default HorizontalBarChart;
